<template>
  <div class="video-upload">
    <el-upload
      v-if="!modelValue"
      v-loading="videoLoading"
      accept="video/*"
      :action="uploadUrl"
      :limit="maxCount"
      :file-list="fileList"
      :headers="{ Authorization: token }"
      :before-upload="beforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleError"
      :on-exceed="handleExceed"
    >
      <el-button type="primary" size="default">上传视频</el-button>
    </el-upload>
    <div v-else>
      <div class="video-delete">
        <c-icon :size="16" name="Delete" class="danger-color" @click="handleRemove"></c-icon>
      </div>
      <video :src="modelValue" controls="controls" controlslist="nodownload" style="width: 100%">
        您的浏览器不支持 video 标签
      </video>
    </div>
    <!-- <div class="el-upload__tip">
      <div class="text" v-for="t in tips" :key="t">· {{ t }}</div>
    </div> -->
  </div>
</template>
<script>
import { uploadUrl } from '@/api/material';
import useConfirm from '@/hooks/useConfirm.js';
import { replaceUrl } from '@/utils/utils';
import { uploadBaseURL } from '@/api/request.js';

export default {
  name: 'VideoUpload',
  props: {
    // 图片属性数组
    modelValue: String,
    // 最大上传图片数量
    maxCount: {
      type: Number,
      default: 1,
    },
    tips: {
      type: Array,
      default() {
        return ['大小：不超过50M'];
      },
    },
  },
  emits: ['success', 'handleRemove'],
  data() {
    return {
      fileList: [],
      uploadUrl: `${uploadBaseURL}${replaceUrl(uploadUrl)}`,
      videoLoading: false,
    };
  },
  computed: {
    token() {
      return this.$store.state.common.token;
    },
  },
  methods: {
    emitInput(video) {
      this.$emit('success', video);
    },
    async handleRemove() {
      await useConfirm();
      this.emitInput('');
    },
    beforeUpload(file) {
      this.videoLoading = true;
      const isVideo = file.type.includes('video/');
      const isLt50M = file.size / 1024 / 1024 < 50;

      if (!isVideo) {
        this.videoLoading = false;
        this.$message.error('只能上传视频文件');
        return false;
      }
      if (!isLt50M) {
        this.videoLoading = false;
        this.$message.error('上传视频大小不能超过 50MB!');
        return false;
      }
      return true;
    },
    handleUploadSuccess(res) {
      if (res.code === 401) {
        this.$router.push({
          path: '/login',
          query: {
            to: this.$route.path,
          },
        });
        return;
      }
      if (res.code !== 200) {
        this.$message.error(res.msg);
        this.fileList = [];
        this.videoLoading = false;
        return;
      }
      const data = res.data || [];
      this.videoLoading = false;
      this.emitInput(data[0]);
      this.$message.success('上传成功');
    },
    handleError(err) {
      this.$message.error(err.msg || '上传错误');
      this.videoLoading = false;
    },
    handleExceed() {
      this.$message({
        message: `最多只能上传${this.maxCount}个视频`,
        type: 'warning',
      });
    },
  },
};
</script>
<style lang="less" scoped>
.video-delete {
  text-align: right;
}
</style>
